<template>
  <div>
    <div style="margin-top:25px; margin-left:25px; font-size:18px; font-weight:600;">
      <span class="glyphicon glyphicon-share-alt "></span>&nbsp;&nbsp;管理员管理
    </div>
    <!-- 添加管理员按钮触发模态框 -->
    <div class="row" style="margin-top: 20px">
    <div class="col-xs-7">&nbsp;
      <button type="button" class="btn btn-info btn-lg"  data-toggle="modal"
              data-target="#myModal" style="background-color: #F45809;font-weight: bold">添加管理员
      </button>
    </div>
    <!-- 模态框（Modal） -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"
    >
      <div class="modal-dialog modal-lg">
        <div class="modal-content">
          <div class="modal-header">
            <h2 class="modal-title" id="myModalLabel" style="font-weight: bold">
              添加管理员
            </h2>
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
              &times;
            </button>

          </div>
          <div class="modal-body">
            <div class="row">
              <div class="col-xs-3 text-right">
                <p style="font-weight: bold;font-size: 15px;padding-top: 5px">管理员账号：</p>
              </div>
              <div class="col-xs-9">
                <input type="text" v-model="adminNum" class="form-control" placeholder="请输入管理员账号" style="width: 200px;height: 30px">
              </div>
            </div>

            <div class="row" style="margin-top: 20px">
              <div class="col-xs-3 text-right">
                <p style="font-weight: bold;font-size: 15px;padding-top: 5px">管理员名字：</p>
              </div>
              <div class="col-xs-9">
                <input type="text" v-model="adminName" class="form-control" placeholder="请输入管理员名字" style="width: 200px;height: 30px">
              </div>
            </div>
          </div>

            <div class="modal-footer" >
            <button v-on:click="adminSub" type="button" class="btn btn-primary" style="height: 30px;width: 60px;font-size: 10px;font-weight: bold">
              提交更改
            </button>

            <button type="button" class="btn btn-danger" data-dismiss="modal" style="height: 30px;width: 60px;font-size: 10px;font-weight: bold">
              关闭
            </button>
          </div>
        </div><!-- /.modal-content -->
      </div><!-- /.modal -->
    </div>

    <div class="col-xs-5">
      <div class="col-xs-8" style="margin-top: 4px">
        <input type="text" v-model="userAdminKeyWord" class="form-control" style="height: 30px;" placeholder="请输入关键字">
      </div>
      <button v-on:click="userAdminsearch" class="btn btn-default btn-info btn-lg" type="submit" style="height: 30px;width: 60px;background-color: #F45809" >查询</button>&nbsp;
      <button v-on:click="userAdminClean" class="btn btn-danger btn-info btn-lg" type="submit" style="height: 30px;width: 60px;" >清空</button>
    </div>
    </div>

    <div class="table-responsive text-center" style="margin-top: 50px;">
      <table class="table" style="font-size: 15px;">
        <thead style="font-size: 20px">
        <tr>
          <th>管理员登录名</th>
          <th>管理员姓名</th>
          <th>分数</th>
          <th>操作</th>
        </tr>
        </thead>
        <tbody style="font-size: 20px">
        <tr>
          <td>1</td>
          <td>胡玉彬</td>
          <td>50</td>
          <td>
            <button type="button" class="btn btn-success">编辑</button>
            <button type="button" class="btn btn-danger">删除</button>
          </td>
        </tr>
        <tr>
          <td>2</td>
          <td>叶德辉</td>
          <td>48</td>
          <td>
            <button type="button" class="btn btn-success">编辑</button>
            <button type="button" class="btn btn-danger">删除</button>
          </td>
        </tr>
        <tr>
          <td>3</td>
          <td>黄世辉</td>
          <td>45</td>
          <td>
            <button type="button" class="btn btn-success">编辑</button>
            <button type="button" class="btn btn-danger">删除</button>
          </td>
        </tr>
        <tr>
          <td>4</td>
          <td>张熔城</td>
          <td>0</td>
          <td>
            <button type="button" class="btn btn-success">编辑</button>
            <button type="button" class="btn btn-danger">删除</button>
          </td>
        </tr>
        </tbody>
      </table>
    </div>
    <div class="row">
      <div class="col-xs-12" style="margin-top: 30px">
        <div class="pull-right">
          <ul class="pagination">
            <li><a href="#">上一页</a></li>
            <li><a href="#">首页</a></li>
            <li><a href="#">尾页</a></li>
            <li><a href="#">下一页</a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "userAdminPage",
  data (){
    return{
      adminNum:'',
      adminName:'',
      userAdminKeyWord:''
    }
  },
  methods:{
    adminSub:function () {
      if (this.adminNum==''){
        alert('请输入管理员账号');
        return;
      }
      if (this.adminNum.length!=9){
        alert('账号不正确');
        return;
      }
      if (this.adminName==''){
        alert('请输入管理员的名字');
        return;
      }
    },
    userAdminsearch:function () {
      if (this.userAdminKeyWord==''){
        alert('请输入关键字');
        return;
      }
    },
    userAdminClean:function () {
      this.userAdminKeyWord='';
    }
  }
}
</script>

<style scoped>
  /*div{*/
  /*  border:0px #000000 solid;*/
  /*}*/
  #chang:hover{
    background-color: #EEEEEE;
  }
</style>
